<template>
  <div class="home">
    <!-- 顶部搜索 -->
    <van-search
      placeholder="请输入搜索关键词"
      v-model="searchVal"
      shape="round"
      background="#D7B782"
      left-icon
      right-icon="search"
      @search="Search"
    />
    <!-- 下拉刷新页面数据 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="HomeBox">
        <!-- banner -->
        <Banner :BannerData="BannerData"></Banner>
        <!-- Nav -->
        <!-- <van-grid :border="false" :column-num="5">
          <van-grid-item text="拍卖" icon="photo-o" />
          <van-grid-item text="私人订购" icon="photo-o" />
          <van-grid-item text="万象展堂" icon="photo-o" />
          <van-grid-item text="大咖秀" icon="photo-o" />
          <van-grid-item text="寻师问友" icon="photo-o" />
        </van-grid> -->
        <!-- 分类 -->
        <div class="navBox">
          <van-tabs v-model="activeIndex">
            <van-tab
              :title="itemName.title.name"
              v-for="itemName in NavList"
              :key="itemName.title.id"
            >
              <van-row gutter="4">
                <van-col
                  :span="IsContent(itme.content)"
                  v-for="itme in itemName.list"
                  :key="itme.id"
                  @click="navOnClick(itme.id)"
                >
                  <van-col :span="IsContentP(itme.content)">
                    <p>{{itme.name}}</p>
                  </van-col>
                  <van-col span="12" class="imgBox">
                    <img v-if="itme.content!==''" :src="itme.content" />
                  </van-col>
                </van-col>
              </van-row>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-pull-refresh>
    <!-- 底部导航 -->
    <Tabbar :active="0"></Tabbar>
  </div>
</template>

<script>
/* ... */
import Tabbar from '@/components/Tabbar.vue'
import Banner from '@/components/Banner.vue'
import { getHomeClassifyList, getBanner } from '@/api/api'

export default {
  name: 'home',

  mixins: [],

  components: {
    Tabbar,
    Banner
  },

  props: {},

  data () {
    return {
      searchVal: '',
      count: 0,
      isLoading: false,
      activeIndex: 0,
      NavList: [],
      BannerData: []
    }
  },

  computed: {},

  watch: {},

  created () {
    this.GetJson()
    this.GetBanner()
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    GetJson () {
      let postData = {}
      getHomeClassifyList(this.$qs.stringify(postData))
        .then(res => {
          console.log(res.data.data)
          this.NavList = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    GetBanner () {
      let postData = {}
      getBanner(this.$qs.stringify(postData))
        .then(res => {
          console.log(res.data.data)
          this.BannerData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        // this.$toast('刷新成功')
        this.GetJson()
        this.isLoading = false
        this.count++
      }, 500)
    },
    // 判断状态是否有图片
    IsContent (data) {
      if (data === '') {
        return 6
      } else {
        return 24
      }
    },
    IsContentP (data) {
      if (data === '') {
        return 24
      } else {
        return 12
      }
    },
    // 分类目录
    navOnClick (data) {
      this.$router.push('./listgoods?class=' + data)
    },
    // 搜索检索
    Search () {
      // this.$router.push('/listgoods?name=' + this.searchVal)
      this.$toast('功能开发中')
    }
  }
}
</script>

<style lang="less" >
/* ... */
.container {
  margin: 0 15px;
}
.home {
  background-color: #f6f6f6;
  height: 100%;
  .van-pull-refresh {
    height: calc(100% - 50px - 55px);
    overflow-y: auto;
  }
  .navBox {
    margin-top: 5px;
    .van-tabs__wrap {
      width: 80px;
      min-height: 465px;
      float: left;
      .van-tabs__nav {
        display: block;
        padding-bottom: 0;
        .var-tab {
          font-size: 14px;
        }
        .van-tab--active {
          background-color: #d7b782;
          color: #ffffff;
        }
        .van-tabs__line {
          display: none;
        }
      }
    }
    .van-tabs__content {
      width: calc(100% - 86px);
      float: right;
      background-color: #ffffff;
      min-height: 465px;
      .van-tab__pane {
        .van-col--6 {
          text-align: center;
        }
        .van-col--24 {
          font-size: 24px;
          height: 53px;
          .van-col--12 {
            p {
              line-height: 53px;
              margin: 0;
              margin-left: 10px;
            }
          }
          .imgBox {
            text-align: right;
            img {
              height: 52px;
              font-size: 0;
            }
          }
        }
        p {
          font-size: 12px;
          color: #666666;
        }
      }
    }
  }
}
</style>
